<template>
  <div v-title="'收费统计 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - fixedHeightSmall)+'px'}]">
    <div class="content-box">
      <div class="charge-statistics-box">
        <el-tabs v-model="tabsActiveName" type="card" @tab-click="tabChange" class="globalTabsStyle_1">
          <el-tab-pane label="今天" name="first"></el-tab-pane>
          <el-tab-pane label="昨天" name="fifth"></el-tab-pane>
          <el-tab-pane label="本月" name="second"></el-tab-pane>
          <el-tab-pane label="今年" name="third"></el-tab-pane>
        </el-tabs>
        <el-date-picker
          :clearable="false"
          class="dateRangeSelectStyle"
          v-model="searchTime"
          type="datetimerange"
          :picker-options="pickerOptions"
          placeholder="选择时间范围"
          :editable="false"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm"
          @change="handleChangeDate">
        </el-date-picker>
        <div class="content" :class="{'marginTop-14':hasMarginTop}">
          <el-row style="padding:25px;background-color:white;">
            <el-col :span="6" style="margin-right:1.2%">
              <div class="total-number">{{totalListData.info.totalTicket}}</div>
              <div>总售出票数（张）</div>
            </el-col>
            <el-col :span="6" style="margin-right:1.2%">
              <div class="total-number">{{totalListData.info.onlineSellOutPrice}}</div>
              <div>在线销售收入（元）</div>
            </el-col>
            <el-col :span="6" style="margin-right:1.2%">
              <div class="total-number">{{totalListData.info.outLineSellOutPrice}}</div>
              <div>线下销售收入（元）</div>
            </el-col>
            <el-col :span="6">
              <div class="total-number">{{totalListData.info.totalPrice}}</div>
              <div>总收入（元）</div>
            </el-col>
          </el-row>
          <div style="margin-top: 30px;padding-bottom:40px;">
            <div class="tabContainer gray_bg"  isLoading="loadingTab"
                 element-loading-text="拼命加载中">
              <el-table
                :data="totalListData.list"
                style="width: 100%"
               >
                <el-table-column
                  prop="startSite"
                  label="乘车车站"
                  width="160px">
                </el-table-column>
                <el-table-column
                  prop="midWaySite"
                  label="途径站"
                  width="220px">
                </el-table-column>
                <!-- :formatter="formatDate"-->
                <el-table-column
                  width=''
                  prop="endSite"
                  label="终点站">
                </el-table-column>
                <el-table-column
                  prop="sellOutTicket"
                  width=''
                  label="售出票数（张）">
                </el-table-column>
                <el-table-column
                  prop="onlineOfPrice"
                  width=''
                  label="在线销售收入（元）">
                </el-table-column>
                <el-table-column
                  prop="outlineOfPrice"
                  width=''
                  label="线下销售收入（元）">
                </el-table-column>
                <el-table-column
                  prop="totalPrice"
                  width=''
                  label="合计收入（元）">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import MkBreadcrumb from './../../../components/MkBreadcrumb.vue'
  import chargeService from './../../../services/charge'
//  import MkPermission from "../../components/MkPermission";
  import {mapState} from 'vuex'
  export default {
    name: 'chargeStatistics',
    components: {
     MkBreadcrumb,
//      MkPermission,
    },
    computed:mapState({
      bodyHeight:state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall
    }),
    mounted () {
      this.loadTollList();
    },
    methods: {
      loadTollList () {
        this.isLoading = true;
//        if (this.searchCondition.startDate === '') {
          chargeService.loadChargeStatistics (this.searchCondition, (data) => {
            this.totalListData = data.data;
//            console.log(this.totalListData);
            this.isLoading = false;
          });
      },
      handleChangeDate () {
//        console.log(this.searchTime);
        if (this.searchTime[0] !== null && this.searchTime[1] !== null) {
          this.searchCondition.startDate = this.searchTime[0].pattern("yyyy-MM-dd HH:mm");
          this.searchCondition.endDate = this.searchTime[1].pattern("yyyy-MM-dd HH:mm");
          this.tabsActiveName = '';
          this.searchCondition.range = '';
          this.loadTollList();
          this.hasMarginTop = true;
        } else {
          this.searchCondition.startDate = '';
          this.searchCondition.endDate = '';
          this.hasMarginTop = false;
          if(this.tabsActiveName == '') {
            this.hasMarginTop = true;
          }
        }
      },
      tabChange (tab) {
//        this.isOpen = {'open_0':false, 'open_1':false, 'open_2':false, 'open_3':false,'open_4':false, 'open_5':false, 'open_6':false};
        if (tab.name === 'first') {
          this.searchCondition.range = 'today';
        } else if (tab.name === 'second') {
          this.searchCondition.range = 'thisMonth';
        } else if (tab.name === 'third') {
          this.searchCondition.range = 'thisYear';
        } else if(tab.name == 'fifth'){
          this.searchCondition.range = 'yesterday';
        }
        this.resetTime();
        this.loadTollList();
      },
      resetTime () {
        this.searchCondition.startDate = '';
        this.searchCondition.endDate = '';
        this.searchTime = '';
        this.hasMarginTop = false;
      },
    },
    data(){
      return {
        hasMarginTop: false,
        breadcrumbData: {
          list: {
            first: {
              name: '财务管理',
              path: null,
              isClickAble: false
            },
            second: {
              name: '收费统计',
              path: null,
              isClickAble: false
            }
          },
          menuIconStyle : 'moneyIconStyle'
        },
        isLoading: true,
        totalListData: {
          list: [],
          info:{}
        },
        tabsActiveName: 'first',
        isOpen:{
//          'open_0': false,
//          'open_1': false,
//          'open_2': false,
//          'open_3': false,
//          'open_4': false,
//          'open_5': false,
//          'open_6': false
        },
        searchTime: '',
        searchCondition: {
          range: 'today',
          startDate: '',
          endDate: '',
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    }
  }
</script>

<style lang="less">
  @import '../../../assets/style/main.less';
  .charge-statistics-box {

    position:relative;

    .marginTop-14{
      margin-top:14px;
    }

    .charge-statistics-content-box {
      padding: 0 30px;
      background-color: @whiteColor;
    }
    .dateRangeSelectStyle{
      position:absolute;
      left:340px;
      top:0;
      .el-range-input{
        background:#fff;
      }
      &.el-input__inner{
        height:40px;
        background-color:#ffffff!important;
      }
    }
/*    .charge-box {
      border-bottom: 2px solid @borderColor;
      margin-bottom: 40px;
      .gray_bg {
        margin-bottom: 50px;
        padding: 25px 20px 0 20px;
        border-top: 1px solid @borderColor;
        .el-table {
          border-bottom: 1px solid @borderColor;
        }
      }
    }*/
    .el-row {
      padding: 20px 0 20px 0;
    }
    /*.el-col .list_1{*/
      /*float:left;*/
      /*width:25%;*/
    /*}*/
    /*.el-col .list_1 div:last-child {
      font-size: 18px;
      color: @fontColorThree;
    }*/
   /* .el-col-23 .list_1 div:first-child {
      margin-bottom: 10px;
      font-size: 24px;
      color: @fontColorOne;
    }*/

   /* .el-col .list_2{
      float:left;
      width:16.5%;
    }*/
    /*.el-col .list_2 div:last-child {
      font-size: 14px;
      color: @fontColorThree;
    }
    .el-col-23 .list_2 div:first-child {
      margin-bottom: 10px;
      font-size: 20px;
      color: @fontColorOne;
    }*/
    .content{
      background: #fff;
    }

    .el-col-6 {
      width: 24%;
      height: 150px;
      background-color: #f9fafa;
      .total-number{
        margin: 40px 0 10px 50px;
        font-size: 28px;
      }
      div:last-child{
        color: #81939e;
        font-size: 14px;
        margin-left: 50px;
      }
    }
  }</style>
